<template>
  <div id="app">
    <h1>父组件</h1>
    <InfoList :info="info" @getId="getId" />
    <Car :car_item="car_item" />
  </div>
</template>

<script>
import InfoList from "./components/InfoList";
import Car from "./components/Car";
export default {
  name: "App",
  data() {
    return {
      info: [
        {
          id: "01",
          img_src: "01xx",
          name: "01男装",
          price: 10,
          num: 0,
          price_sum: 0
        },
        {
          id: "02",
          img_src: "02xx",
          name: "02男装",
          price: 20,
          num: 0,
          price_sum: 0
        },
        {
          id: "03",
          img_src: "03xx",
          name: "03男装",
          price: 30,
          num: 0,
          price_sum: 0
        },
        {
          id: "04",
          img_src: "04xx",
          name: "04男装",
          price: 40,
          num: 0,
          price_sum: 0
        }
      ],
      car_item: []
    };
  },
  // 注册组件
  components: {
    InfoList,
    Car
  },
  methods: {
    getId(item_id) {
      console.log("App");
      console.log(item_id); //01 02 03
      // this.car_item.push
      // 数组查找某个元素是哪个方法
      // 已知 id
      const result = this.info.find(item => {
        return item.id == item_id;
      });
      /*  const result1 = this.car_item.find(item => {
        return item.id == item_id;
      });
      console.log(result1); */
      // 当car_item中没有这一项时，push加入
      // 有，则return  提示购物车已有 alert
      if (
        this.car_item.find(item => {
          return item.id == item_id;
        })
      ) {
        alert("购物车已存在");
        return;
      }
      this.car_item.push(result);
      console.log(this.car_item);
    }
  }
};
/* 
购物车
App
子组件
购物列表组件 5条数据    有一个子组件  重复调用了该子组件五遍
购物车






*/
</script>

<style>
</style>
